<template>
  <div class="container" ref="mainCon">
    <topTitle v-if="!hiddleToolBar" :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="考核年月" class="row-padding-bottom">
              <el-date-picker
                :picker-options="pickerOptions"
                value-format="yyyy-MM"
                v-model="month"
                @change="changeMonth"
                type="month"
                placeholder="请选择月份"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-form-item>
            <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          :data="tableList"
          ref="tableBox1"
          @sort-change="sortChange"
          :max-height="tableHeight"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            :formatter="formatTd"
            width="250"
          ></el-table-column>
          <el-table-column
            prop="year"
            label="考核年月"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            min-width="40%"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.year +
                '-' +
                (scope.row.month && scope.row.month > 10
                  ? scope.row.month
                  : '0' + scope.row.month)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" :formatter="formatTd" min-width="20%">
            <template slot-scope="scope">
              <el-link
                type="primary"
                style="margin-right: 0"
                v-if="isShowDetail"
                @click="toDetail(scope.row)"
                >查看详情</el-link
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'AssessmentList',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '月度考核列表',
      pickerOptions: {
        disabledDate(time) {
          //如果没有后面的-8.64e7就是不可以选择今天的
          return time.getTime() > Date.now() - 8.64e7
        },
      },
      tableList: [],
      requestUrl: '/api-gov/govExamGrade/expand/list',
      filterField: {
        year: '',
        month: '',
      },
      month: '',
      pageNo: 1,
      pageSize: 20,
      isShow: false,
      loading: false,
      isShowDetail: false,
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('assessmentList:detail') > -1
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    changeMonth(val) {
      if (val) {
        this.filterField.year = val.split('-')[0]
        this.filterField.month = val.split('-')[1]
      } else {
        this.filterField.year = ''
        this.filterField.month = ''
      }
    },
    // 详情
    toDetail({ year = '', month = '' } = {}) {
      this.$router.push({
        path: '/home/enterpriseScore/assessmentDetail',
        name: 'AssessmentDetail',
        query: {
          date: year + '-' + (month && (month > 10 ? month : '0' + month)),
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enterpriseScore/assessmentList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    top: 196px;
    // padding:24px;
  }
}
@import '../../../static/css/filterArea.less';
</style>
